<template>
  <div>
    <basic-container>
      <el-form inline="inline"
               ref="tableOptionSearch"
               :model="tableOptionSearch"
               label-width="100px"
               size="mini">
        <el-form-item label="审批状态:">
          <el-select v-model="tableOptionSearch.status"
                     placeholder="请选择">
            <el-option v-for="(item, index) in statusOptionList"
                       :key="index"
                       :label="item.label"
                       :value="item.vlaue">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="维保类型:">
          <el-select v-model="tableOptionSearch.type"
                     placeholder="请选择">
            <el-option v-for="(item, index) in maintenanceTypeOptionList"
                       :key="index"
                       :label="item.label"
                       :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="设备类别:">
          <el-cascader v-model="tableOptionSearch.category"
                       :options="equipmentTypeList"
                       :props="{ expandTrigger: 'hover' }"
                       @change="equipmentTypeChange">
          </el-cascader>
        </el-form-item>
        <el-form-item label="审批号：">
          <el-input v-model="tableOptionSearch.number" placeholder="请输入审批号"></el-input>
        </el-form-item>
        <el-form-item label="申请部门：">
          <el-input v-model="tableOptionSearch.department" placeholder="请输入申请部门"></el-input>
        </el-form-item>
        <el-form-item label="申请人：">
          <el-input v-model="tableOptionSearch.person" placeholder="请输入申请人"></el-input>
        </el-form-item>
        <el-form-item label-width="20px">
          <el-button type="primary"
                     @click="searchFormSubmit">搜索</el-button>
          <el-button @click="tableOptionSearch = {}">重置</el-button>
        </el-form-item>
      </el-form>

      <avue-crud :option="tableOption"
                 :data="gridData"
                 :table-loading="tableLoading"
                 :page="page"
                 @current-change="currentPageChange"
                 @size-change="sizeChange"
                 ref="crud">
        <template slot-scope="scope" slot="approvalStatus">
          <template v-if="scope.row.approvalStatus === 0">待审批</template>
          <template v-else-if="scope.row.approvalStatus === 1">审批中</template>
          <template v-else-if="scope.row.approvalStatus === 2">不通过</template>
          <template v-else-if="scope.row.approvalStatus === 3">通过</template>
          <el-button type="info"
                     class="processBtn"
                     plain size="mini"
                     @click.stop="processBtn(scope.row)">流程<!--<span hidden="hidden">{{scope.row.state}}</span>--></el-button>
        </template>
        <template slot-scope="scope" slot="coded" v-if="scope.row.equipment">{{ scope.row.equipment.coded }}</template>
        <template slot-scope="scope" slot="name" v-if="scope.row.equipment">{{ scope.row.equipment.name }}</template>
        <template slot-scope="scope" slot="marking" v-if="scope.row.equipment">{{ scope.row.equipment.marking }}</template>
        <template slot-scope="scope" slot="brand" v-if="scope.row.equipment">{{ scope.row.equipment.brand }}</template>
        <template slot-scope="scope" slot="departmentAndName">{{ scope.row.departmentName }}<span>/</span>{{ scope.row.userName }}</template>
        <template slot-scope="scope" slot="menu">
          <el-button type="primary"
                     size="small"
                     v-show="scope.row.approvalStatus === 0 || scope.row.approvalStatus === 1"
                     plain
                     @click.stop="examineModeBtn(scope.row,scope.index)">审核</el-button>
          <el-button type="primary"
                     size="small"
                     plain
                     @click.stop="seeModeBtn(scope.row,scope.index)">查看</el-button>
          <el-button type="primary"
                     size="small"
                     v-show="scope.row.approvalStatus === 0"
                     plain
                     @click.stop="updateModeBtn(scope.row,scope.index)">修改</el-button>
          <el-button type="primary"
                     size="small"
                     v-show="scope.row.approvalStatus === 0"
                     plain
                     @click.stop="deleteFormBtn(scope.row,scope.index)">删除</el-button>
        </template>
      </avue-crud>
    </basic-container>

    <!-- 预约单 -->
    <el-dialog :title="dialogMaintenanceTitle" :visible.sync="examineMode" width="60%" center>
      <el-form :model="formData" ref="formData" label-width="130px" size="mini" style="text-align: left">
        <el-row :span="24" style="">
          <el-form-item label="设备编号：">{{ formData.approvalNumber }}</el-form-item>
          <div class="lineDiv"></div>
          <el-col :span="12">
            <el-form-item label="设备类别：" v-if="formData.equipment">{{ formData.equipment.equipmentType }}</el-form-item>
            <el-form-item label="设备名称：" v-if="formData.equipment">{{ formData.equipment.name }}</el-form-item>
            <el-form-item label="品牌：" v-if="formData.equipment">{{ formData.equipment.brand }}</el-form-item>
            <el-form-item label="购买价格：" v-if="formData.equipment">{{ formData.equipment.price }}</el-form-item>
            <el-form-item label="保养周期：" v-if="formData.equipment">{{ formData.equipment.maintainCycle }}</el-form-item>
            <el-form-item label="效准周期：" v-if="formData.equipment">{{ formData.equipment.correctCycle }}</el-form-item>
            <el-form-item label="维修次数：" v-if="formData.equipment">{{ formData.equipment.maintenanceTime }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备编码：" v-if="formData.equipment">{{ formData.equipment.coded }}</el-form-item>
            <el-form-item label="型号：" v-if="formData.equipment">{{ formData.equipment.marking }}</el-form-item>
            <el-form-item label="存放位置：" v-if="formData.locationName">{{ formData.locationName }}</el-form-item>
            <el-form-item label="首次启用时间：" v-if="formData.equipment">{{ formData.equipment.firstOpenTime }}</el-form-item>
            <el-form-item label="最近保养时间：" v-if="formData.equipment">{{ formData.equipment.lastMaintainDate }}</el-form-item>
            <el-form-item label="最近效准时间：" v-if="formData.equipment">{{ formData.equipment.lastCorrectDate }}</el-form-item>
            <el-form-item label="最近维修时间：" v-if="formData.equipment">{{ formData.equipment.lastRepairDate }}</el-form-item>
            <el-form-item label="历史维保总费用：">{{ formData.historyCount }}</el-form-item>
          </el-col>
        </el-row>

        <div class="lineDiv"></div>
        <!-- 审核 -->
        <el-row v-show="examineModeType === 2" >
          <el-row :span="24">
            <el-col :span="8">
              <el-form-item label="维保类型：">{{ formData.maintenanceType }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="申请部门/人：">{{ formData.departmentName }} <span>/</span> {{ formData.userName }}</el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="申请时间：">{{ formData.applicationTime }}</el-form-item>
            </el-col>
            <el-form-item label="维保说明：">{{ formData.remakes }}</el-form-item>
          </el-row>
          <el-row :span="24" >
            <el-col :span="24" style="text-align: center">
              <el-button size="medium" type="primary" @click="pass">通过</el-button>
              <el-button size="medium" type="primary" @click="passFail">不通过</el-button>
              <el-button size="medium" @click="examineMode = false">关闭</el-button>
            </el-col>
          </el-row>
        </el-row>

        <!-- 修改 -->
        <el-row v-show="examineModeType === 3" :model="updateForm">
          <el-form-item label="维保类型：">
            {{ updateForm.maintenanceType }}
<!--            <el-select v-model="updateForm.maintenanceType" placeholder="请选择活动区域">-->
<!--              <el-option v-for="(item, index) in maintenanceTypeOptionList"-->
<!--                         :key="index"-->
<!--                         :label="item.label"-->
<!--                         :value="item.value">-->
<!--              </el-option>-->
<!--            </el-select>-->
          </el-form-item>
          <el-form-item label="维保说明：">
            <el-input type="textarea" v-model="updateForm.remarks" width="70%"></el-input>
          </el-form-item>
          <div style="text-align: center">
            <el-button size='medium'  @click="examineMode = false">关闭</el-button>
            <el-button size='medium' type="primary" @click="updateInSubmit('formData')">提交</el-button>
          </div>
        </el-row>
      </el-form>
    </el-dialog>

    <!-- 查看维保单 -->
    <el-dialog title="维保单" :visible.sync="seeFormMode" width="60%" center>
      <el-form :model="formData" ref="formData" label-width="130px" size="mini" style="text-align: left">
        <el-row :span="24" style="text-align: left;">
          <el-form-item label="设备编号：">{{ formData.approvalNumber }}</el-form-item>
          <div class="lineDiv"></div>
          <el-col :span="12">
            <el-form-item label="设备类别：" v-if="formData.equipment">{{ formData.equipment.equipmentType }}</el-form-item>
            <el-form-item label="设备名称：" v-if="formData.equipment">{{ formData.equipment.name }}</el-form-item>
            <el-form-item label="品牌：" v-if="formData.equipment">{{ formData.equipment.brand }}</el-form-item>
            <el-form-item label="购买价格：" v-if="formData.equipment">{{ formData.equipment.price }}</el-form-item>
            <el-form-item label="保养周期：" v-if="formData.equipment">{{ formData.equipment.maintainCycle }}</el-form-item>
            <el-form-item label="效准周期：" v-if="formData.equipment">{{ formData.equipment.correctCycle }}</el-form-item>
            <el-form-item label="维修次数：" v-if="formData.equipment">{{ formData.equipment.maintenanceTime }}</el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="设备编码：" v-if="formData.equipment">{{ formData.equipment.coded }}</el-form-item>
            <el-form-item label="型号：" v-if="formData.equipment">{{ formData.equipment.marking }}</el-form-item>
            <el-form-item label="存放位置：" v-if="formData.application">{{ formData.application.locationName }}</el-form-item>
            <el-form-item label="首次启用时间：" v-if="formData.equipment">{{ formData.equipment.firstOpenTime }}</el-form-item>
            <el-form-item label="最近保养时间：" v-if="formData.equipment">{{ formData.equipment.lastMaintainDate }}</el-form-item>
            <el-form-item label="最近效准时间：" v-if="formData.equipment">{{ formData.equipment.lastCorrectDate }}</el-form-item>
            <el-form-item label="最近维修时间：" v-if="formData.equipment">{{ formData.equipment.lastRepairDate }}</el-form-item>
          </el-col>
          <el-form-item label="历史维保总费用：">{{ formData.historyCount }}</el-form-item>
        </el-row>
        <div class="lineDiv"></div>
        <el-row :span="24" >
          <el-col :span="8"><el-form-item label="维保类型：">{{ DIC.TROULBE_STATUS[formData.maintenanceType].label}}</el-form-item> </el-col>
          <el-col :span="8"><el-form-item label="申请部门/人：">{{formData.departmentName}}<span>/</span>{{ formData.userName }}</el-form-item></el-col>
          <el-col :span="8"><el-form-item label="申请时间：">{{ formData.applicationTime }}</el-form-item></el-col>
          <el-form-item label="维保说明：">{{ formData.remakes }}</el-form-item>
        </el-row>
        <div class="lineDiv"></div>
        <el-row :span="24" style="text-align: center;">
            <!--<el-button size="medium" type="primary" @click="printInfo">打印</el-button>-->
            <el-button size="medium" @click="seeFormMode = false">关闭</el-button>
        </el-row>
      </el-form>
    </el-dialog>

    <!---流程弹窗--->
    <el-dialog title="流程" :visible.sync="processMode" width="35%">
      <div class="block">
        <ul class="el-timeline is-reverse">
          <li class="el-timeline-item" v-for="(activity, index) in activities" :key="index">
            <div class="el-timeline-item__tail"></div>
            <div class="el-timeline-item__node el-timeline-item__node--normal el-timeline-item__node--"></div>
            <div class="el-timeline-item__wrapper">
              <el-card>
                <div class="el-timeline-item__content">
                  审批人：{{ activity.dealerName }} 　
                  <template v-if="activity.dealType == 0">待审批</template>
                  <!-- <template v-else-if="activity.dealType == 1">审批中</template> -->
                  <template v-else-if="activity.dealType == 2">通过</template>
                  <template v-else-if="activity.dealType == 1">不通过</template>
                </div>
                <div class="el-timeline-item__timestamp is-bottom">{{ activity.dealDate }}</div>
                <h4>{{activity.dealNote}}</h4>
              </el-card>
            </div>
          </li>
        </ul>
      </div>
    </el-dialog>
  </div>
</template>


<script>

import { DIC } from '@/const/dic.js'
import eleCalendar from 'ele-calendar'
import moment from 'moment'
import 'ele-calendar/dist/vue-calendar.css'
import  { getEquipmentType } from '@/api/equipment/device/management.js'
import {
  DepartmentTreeVChildrenNull,
  getDepartmentTreeOfId
} from "@/util/util.js"

import {
  option,
  optionSelect,
  tableOptionModeSelectRLDateFormRules,
  tableOptionModeAddFormRules
} from "@/const-personal/equipment/aintenance/maintenance-application.js"
import {
  getMaintenanceList,
  getDeleteById,
  getApproved,
  updateMaintenanceList,
  getProcessList
} from '@/api/equipment/aintenance/maintenance-application.js'

export default {
  data () {
    return {
      DIC :DIC,
      processMode: false, // 流程model
      reverse: true, // 流程数据
      tableOptionModeSelectRLDate: false,  // 添加预约选择区间model
      tableOptionModeSelectRL: false, // 添加设备选择日历
      tableLoading: false,
      tableOptionModeSelect: false,
      examineMode: false,
      seeFormMode: false,
      isApproval: false, // 查看---是否审批

      page: {
        total: 0, //总页数
        currentPage: 1, //当前页数
        pageSize: 10, //每页显示多少条
        pageSizes: [ 5, 10, 20 ]
      },
      statusOptionList: [
        { value: '-1', label: '全部' },
        { value: '0', label: '待审批' },
        { value: '1', label: '审批中' },
        { value: '2', label: '不通过' },
        { value: '3', label: '通过' },
      ], //审批状态
      maintenanceTypeOptionList: [
        { value: '0', label: '保养' },
        { value: '1', label: '校准' },
        { value: '2', label: '维修' }
      ],  //维保类型
      treeData: [
        {
          id: 0,
          label: '一级部门',
          value: 0,
          children: [
            {
              id: 1,
              label: '一级部门1',
              value: 0,
            }
          ]
        }],
      tableOptionModeSelectRLDateForm: {
        beginDate: '',
        beginTime: '',
        endDate: '',
        endTime: '',
      },  // 添加预约选择区间表单
      activities: [
        { content: '活动按期开始', timestamp: '2018-04-15' },
        { content: '通过审核', timestamp: '2018-04-13' },
        { content: '创建成功', timestamp: '2018-04-11' }
      ],
      tableOptionSearch: {
        status: '全部',   // 审批状态
        type: '',  // 维保类型
        category: [],  // 设备类别
        number: '',  // 审批号
        department: '', // 申请部门
        person: ''  // 申请人
      },
      datedef: [{ 'date': "2019-10-14", 'content': '已预约', "cid": 0 }], // 日历插件
      // 添加预约单数据
      // tableOptionModeAddForm: {
      //   remarks: ''
      // },
      tableOptionModeAddFormRules: tableOptionModeAddFormRules,  // 添加预约单表单验证
      tableOptionModeSelectRLDateFormRules: tableOptionModeSelectRLDateFormRules,  // 添加预约选择区间表单验证
      prop: 'date', // 对应日期字段名,
      tableOption: option, //表格设置属性
      // tableOptionAdd: optionAdd,
      tableOptionSelect: optionSelect,
      formOptionSelect: optionSelect,
      tableData: [], //表格的数据
      tablePage: 1,
      tabelObj: {},
      grade: {
        box: false,
        check: []
      },
      gridData: [], // 维保单数据列表
      // tableOptionModeAdd: false,
      selectionList: [],
      tableOptionModeSelectFrom: {},
      examineModeType: 0,
      equipmentTypeList: [],  // 设备类别列表
      selectedEquipmentType: [],
      formData: {
          maintenanceType: 0
      }, // 预约单数据
      updateForm: {
        maintenanceType: '',
        remarks: ''
      }, // 修改维保单
      dialogMaintenanceTitle: '', //修改或审核--查看标题
    }
  },
  components: {
    eleCalendar
  },
  // created(){
  //     this.searchFormSubmit ()
  // },
  methods: {
    // 输入条件搜索维保单列表
    searchFormSubmit () {
      const { status, type, category, number, department, person } = this.tableOptionSearch

      let approval = this.statusOptionList.filter(item => item.label === status)[0].value
      let equipmentId = ''
      if(category.length > 0) {
        equipmentId = category > 1 ? category[category.length - 1] : category[0]
      } else {
        equipmentId = '-1'
      }

      const params = {
        page: this.page.currentPage,
        size: this.page.pageSize,
        maintenanceApplication: {
          approvalStatus: approval === '-1' ? '' : Number(approval),
          maintenanceType: type,
          equipmentId: equipmentId === '-1' || equipmentId.length === 0 ? '' : Number(equipmentId), // 设备类别id
          approvalNumber: number,
          // department: department,
          // person: person
        }
      }
      console.log(params)
      this._getList(params)
    },
    currentPageChange (val) {
      this.page.currentPage = val
      this._getTableList()
    },
    sizeChange (val) {
      this.page.pageSize = val
      this._getTableList()
    },
    // 审核submit
    examineModeBtn (row, index) {
      console.log(row)
      this.dialogMaintenanceTitle = '审核维保单'
      this.examineMode = true
      this.examineModeType = 2
      this.formatFormData(row)
    },
    // 审核通过
    pass () {
      console.log(this.formData)
      const params = {
        id: this.formData.id,
        status: 1,
        remarks: this.formData.remakes
      }
      this.checkInfo(params)
    },
    // 审核
    checkInfo (data) {
      getApproved(data).then(res => {
        if (res.data.code === 200) {
          console.log(res)
          this.examineMode = false
          this._getTableList()
          this.$notify({ title: '操作成功', type: 'success' })
        } else {
          this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger' })
        }
      })
    },
    // 审核不通过
    passFail () {
      const params = {
        id: this.formData.id,
        status: 0,
        remarks: this.formData.remakes
      }
      this.checkInfo(params)
    },
    // 格式化数据
    formatFormData (row) {
      this.formData = {
        id: row.id,
        approvalNumber: row.approvalNumber,
        approvalStatus: row.approvalStatus,
        maintenanceType: row.maintenanceType,
        equipmentId: row.equipmentId,
        equipment: {
          id: row.equipment.id,
          equipmentTypeId: row.equipment.equipmentTypeId,
          equipmentType: getDepartmentTreeOfId(this.equipmentTypeList, row.equipment.equipmentTypeId.toString()).label,
          coded: row.equipment.coded,
          name: row.equipment.name || '',
          marking: row.equipment.marking,
          brand: row.equipment.brand,
          price: row.equipment.price,
          maintainCycle: row.equipment.maintainCycle,
          correctCycle: row.equipment.correctCycle,
          firstOpenTime: row.equipment.firstOpenTime,
          lastRepairDate: row.equipment.lastRepairDate,
          lastMaintainDate: row.equipment.lastMaintainDate,
          lastCorrectDate: row.equipment.lastCorrectDate,
          maintenanceTime: row.equipment.maintenanceTime,
          alterTime: row.equipment.alterTime,
        },
        userName: row.userName,
        departmentId: row.departmentId,
        departmentName: row.departmentName,
        applicationTime: moment(row.applicationTime).format('YYYY-MM-DD'),
        historyCount: row.historyCount,
        remakes: row.remakes,
        locationName: row.locationName
      }
      console.log(this.formData)
    },
    // 查看
    seeModeBtn (row, index) {
      console.log(row)
      this.seeFormMode = true
      this.formatFormData(row)
    },
    // 打印
    printInfo () {
      this.isApproval = true
    },
    // 修改
    updateModeBtn (row, index) {
      this.dialogMaintenanceTitle = '维保单'
      this.examineModeType = 3
      this.examineMode = true

      this.formatFormData(row)

      const type = this.maintenanceTypeOptionList.filter(item => Number(item.value) === row.maintenanceType)
      this.updateForm = {
        maintenanceType: type[0].label,
        remarks: row.remakes
      }
    },
    // 修改提交
    updateInSubmit (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const data = {
            // applicationTime: moment(this.formData.applicationTime).format('YYYY-MM-DD'),
            id: this.formData.id,
            // approvalNumber: this.formData.approvalNumber,
            // approvalStatus: Number(this.formData.approvalStatus),
            equipmentId: Number(this.formData.equipmentId),
            // locationName: this.formData.locationName,
            maintenanceType: Number(this.maintenanceTypeOptionList.filter(item => item.label === this.updateForm.maintenanceType)[0].value),
            remakes: this.updateForm.remarks
          }

          updateMaintenanceList(data).then(res => {
            if (res.data.code === 200) {
              this.examineMode = false
              this.$refs[formName].resetFields()
              this.updateForm.maintenanceType = res.data.data.maintenanceType
              this.updateForm.remakes = res.data.data.remakes
              this._getTableList()
              this.$notify({ title: '操作成功', type: 'success', message: '已修改成功!' })
            } else {
              this.$notify.error({ title: '操作失败', message: res.data.message, type: 'danger' })
            }
          })
        }
      })
    },
    // 删除当前维保单列表
    deleteFormBtn (row, index) {
      this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning'
      }).then(() => {
        //请求--删除
        console.log('删除')
        getDeleteById({ id: row.id }).then(res => {
          if (res.data.code === 200) {
            this._getTableList()
            this.$notify.success('删除成功');
          } else {
            this.$notify.error(res.data.message)
          }
        })
      })
    },
    formhandleEmpty () {
      this.$refs.form.resetForm();
    },
    formhandleSubmit () {
      this.$refs.form.validate(vaild => {
        if (vaild) {
          this.$message.success(JSON.stringify(this.obj0));
        }
      })
    },
    datePick (date, event, row, dome) {
      console.log(date);
      console.log(event);
      console.log(row);
      console.log(dome);
      //判断该日期是否能被打开
      this.tableOptionModeSelectRLDate = true;
    },
    tableOptionModeSelectRLDateFormBtn () {
      this.$refs['tableOptionModeSelectRLDateForm'].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 流程 按钮
    processBtn (row) {
      getProcessList({ id: row.id }).then(res => {
        res = res.data
        if (res.code === 200) {
          this.processMode = true
          this.activities = res.data
        } else {
          this.$notify.error({ title: '请求失败', message: res.message, type: 'danger' })
        }
      })
    },
    equipmentTypeChange (value) {
      console.log(value)
      this.selectedEquipmentType = value
    },
    // 获取维保数据列表
    _getList (data) {
      getMaintenanceList(data).then(res => {
        if (res.data.code === 200) {
          this.gridData = res.data.data.list

          this.gridData.forEach(item => {
            item.categoryType = getDepartmentTreeOfId(this.equipmentTypeList, item.equipment.equipmentTypeId.toString()).label
          })

          this.page.total = res.data.data.total
          this.page.currentPage = res.data.data.pageNum
          this.page.pageSize = res.data.data.pageSize
        } else {
          this.$notify.error(res.data.message)
        }
      })
    },
    // 获取设备类别
    _getTableList () {
      const params = {
        page: this.page.currentPage,
        size: this.page.pageSize,
        maintenanceApplication: {}
      }
      // 获取设备类型
      getEquipmentType().then(res => {
        if (res.data.code === 200) {
          this.equipmentTypeList = DepartmentTreeVChildrenNull(res.data.data, [{ label:'全部', value:'-1' }])
          this._getList(params)
        }
      })
    },
  },
  mounted () {
    this._getTableList()
  }
}
</script>

<style lang="scss" scoped>
.el-row {
  margin-left: 20px !important;
  margin-bottom: 20px;
  .el-col-3 {
    font-weight: 600;
  }
}
.lineDiv {
  border-top: 1px solid #d6d6d6;
  margin: 20px 0;
  width: 100%;
}
.el-dialog__body {
  padding-top: 15px;
  padding-bottom: 0px;
}
</style>

<style lang="scss">
.avue-crud__menu {
  min-height: 0px !important;
  margin-bottom: 0px !important;
}
.lunarcalendarClass {
  min-height: 70px;
}
.lunarcalendarClass > div > div > span {
  border: 1px solid #409eff;
  background-color: #409eff;
  color: #ffffff;
  padding: 2px 13px;
  border-radius: 5px;
}
.zindex1 > .el-form-item__content {
  z-index: -1;
}
.xhRed > div > label {
  color: red;
  width: 100px;
  font-size: 18px;
  padding: 3px 5px 0px 0px;
}
.selectMrgin > .avue-crud__tip {
  margin-top: 0px;
}
</style>
